<template>
  <!-- 开模信息 -->
  <div class="modelInfoTab" :style="{height:tabHeight+'px'}">
    <!-- 查询表单 -->
    <div class="queryFormBox">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="queryForm.clientId" placeholder="请输入客户名称" clearable>
            <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.productId" placeholder="请输入产品名称" clearable>
            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="dateTimeRange" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryFun" icon="el-icon-search" size="small">查询</el-button>
          <el-button @click="resetFun" size="small">重置</el-button>
         <el-button type="primary" @click="addFun" icon="el-icon-edit" size="small">新增</el-button>
         <el-button type="danger" @click="delsFun" size="small">批量删除</el-button>
         <el-button type="success" @click="exportFun" size="small">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table :data="tableInfo.tableData" border :height="tabHeight - 95"
        :header-cell-style="{ background: '#E5EDFD' }">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column header-align="center" align="center" label="序号" width="70">
          <template slot-scope="scope">
            {{ (pageInfo.pageIndex - 1) * pageInfo.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in tableInfo.columns">
          <el-table-column  v-if="item.type == 'tag'" :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <el-tag 
                v-for="tagItem in item.items" 
                v-if="tagItem.value === scope.row[item.prop]"
                :key="tagItem.value"
                :type="tagItem.tagType || 'primary'"
                size="small">{{ tagItem.text }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column  v-if="item.type == 'date'" :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip align="center">
            <template slot-scope="scope">
                {{ scope.row[item.prop].split(' ')[0] }}
            </template>
          </el-table-column>
          <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip align="center">
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" min-width="140" align="center">
          <template #default>
            <el-tooltip v-if="isAuth(saveAuthName)" class="item" effect="dark" content="修改" 
              placement="bottom" :hide-after="1800" :open-delay="800">
              <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
            </el-tooltip>
            <el-tooltip v-if="isAuth(deleteAuthName)" class="item" effect="dark" content="删除" 
              placement="bottom" :hide-after="1800" :open-delay="800">
              <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pageBox">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageInfo.pageIndex"
        :page-sizes="[20, 50, 100,200,1000]"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <!-- 新增对话框 -->
    <el-dialog :visible.sync="dialogInfo.visible" title="新增" width="900" class="dialogBox">
      <el-form :model="dialogInfo.form" label-width="auto">
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号">
              <el-select v-model="dialogInfo.addForm.contractOrderId" placeholder="请选择合同编号" clearable style="width: 300px;" size="small">
                <el-option v-for="item in dialogInfo.contractOrderIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户">
              <el-select v-model="dialogInfo.addForm.clientId" placeholder="请选择客户" clearable style="width: 300px;" size="small">
                <el-option v-for="item in dialogInfo.clientIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品">
              <el-select v-model="dialogInfo.addForm.productId" placeholder="请选择产品" clearable style="width: 300px;" size="small">
                <el-option v-for="item in dialogInfo.productIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模具编号">
              <el-input v-model="dialogInfo.addForm.modelNo" placeholder="请输入模具编号" clearable style="width: 300px;" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模具价格" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.unitPrice"
                clearable style="width: 300px !important;" size="small" :min="0" :max="10000000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模具类型">
              <el-select v-model="dialogInfo.addForm.modelCategoryId" placeholder="请选择模具类型" clearable style="width: 300px;" size="small">
                <el-option v-for="item in dialogInfo.modelCategoryIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产/试样模">
              <el-radio-group v-model="dialogInfo.addForm.modelType" size="small">
                <el-radio :value="0">试样模</el-radio>
                <el-radio :value="1">生产模</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成模数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.successMo"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="初模数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.primaryMo"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="闷头数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.menTou"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="漏斗数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.louDou"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="口子数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.kouZi"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="芯子数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.kouZi"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="气头数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.qiTou"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="夹子数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.jiaZi"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="冷却数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.lengQue"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="钳片数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.qianPian"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="底模数量" class="inputNumLayout">
              <el-input-number v-model="dialogInfo.addForm.bottomMo"
                clearable style="width: 300px !important;" size="small" :min="0" :max="1000" controls-position="right"/>
              <label class="maxLabel">取值范围：0 ~ 10000000</label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在供应商做大货">
              <el-switch v-model="dialogInfo.addForm.localProduct" active-color="#13ce66"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期">
              <el-date-picker
                v-model="dialogInfo.addForm.dayTime"
                type="date"
                placeholder="请选择日期"
                size="small"
                :shortcuts="shortcuts"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="dialogInfo.addForm.remark" placeholder="请输入备注" clearable style="width: 300px;" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-switch v-model="dialogInfo.addForm.status" active-color="#13ce66"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogInfo.visible = false">取消</el-button>
          <el-button type="primary" @click="dialogInfo.visible = false">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mRequest } from '@/utils/request'
import { getFormatDateTime, timeShortcutOption } from '@/utils'
import { isAuth } from '@/utils'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      isAuth: isAuth,
      saveAuthName: 'order:ordermodel:save',
      deleteAuthName: 'order:ordermodel:delete',
      queryForm: {
        clientId: undefined,
        productId: undefined,
        startDateTime: undefined,
        endDateTime: undefined,
      },
      clientList: [], //客户名称
      productList: [], //产品名称
      dateTimeRange: '', //时间范围
      pickerOptions: timeShortcutOption(),
      tableInfo:{
        tableData:[],
        columns:[
          {label: '客户合同编号', prop: 'clientContractNo',width: 110},
          {label: '客户名称', prop: 'clientName'},
          {label: '产品名称', prop: 'productNo'},
          {label: '业务', prop: 'userName'},
          {label: '模具编号', prop: 'modelNo'},
          {label: '生产/试样模', prop: 'modelType',
            type: 'tag',
            items: [
              {value: 0, text: '试样模', tagType: 'info'},
              {value: 1, text: '生产模'}
            ],
            width: 100
          },
          {label: '价格', prop: 'unitPrice'},
          {label: '在供应商做大货', prop: 'unitPrice',
            type: 'tag',
            items: [
              {value: 0, text: '不在', tagType: 'danger'},
              {value: 1, text: '在'}
            ],
            width: 120
          },
          {label: '成模', prop: 'successMo'},
          {label: '初模', prop: 'primaryMo'},
          {label: '闷头', prop: 'menTou'},
          {label: '漏斗', prop: 'louDou'},
          {label: '口子', prop: 'kouZi'},
          {label: '芯子', prop: 'xinZi'},
          {label: '气头', prop: 'qiTou'},
          {label: '夹子', prop: 'jiaZi'},
          {label: '钳片', prop: 'qianPian'},
          {label: '冷却', prop: 'lengQue'},
          {label: '底模', prop: 'bottomMo'},
          {label: '模具类别', prop: 'modelCategoryName'},
          {
            label: '日期',
            prop: 'dayTime',
            type: 'date',
            width: 120
          },
          {label: '备注', prop: 'remark'},
          {
            label: '采购审核',
            prop: 'updateUser',
            type: 'tag',
            items: [
              {value: 38, text: '已审核', tagType: 'success'}
            ]
          },
          {
            label: '状态',
            prop: 'status',
            type: 'tag',
            items: [
              {value: 0, text: '禁用', tagType: 'danger'},
              {value: 1, text: '正常'}
            ]
          },
        ],
      },
      pageInfo: {
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0
      },
      dialogInfo:{
        visible: false,
        addForm:{
          contractOrderId:'', //合同编号
          clientId:'',  //客户ID
          productId:'', //产品ID
          modelNo:'', //模具编号
          unitPrice:0, //模具价格
          modelCategoryId:'', //模具类型
          modelType:'', //生产/试样模
          successMo:0, //成模数量
          primaryMo:0, //初模数量
          menTou:0,  //闷头数量
          louDou:0,  //漏斗数量
          kouZi:0, //口子数量
          xinZi:0, //芯子数量
          qiTou:0, //气头数量
          jiaZi:0, //夹子数量  
          lengQue:0, //冷却数量
          qianPian:0, //钳片数量
          bottomMo:0, //底模数量
          localProduct:true, //在供应商做大货
          dayTime:'', //日期
          remark:'', //备注
          status:true, //状态
        },
        contractOrderIdList:[],
        clientIdList:[],
        productIdList:[],
        modelCategoryIdList:[],
      }
    }
  },
  watch: {},
  computed: {},
  props:{
    tabHeight:{
      type: Number,
      default: 0
    }
  },
  created() { },
  mounted() {
    this.getSelectData()
    this.initTableData()
  },
  methods: {
    // 查询
    queryFun() {
      this.queryForm.startDateTime = this.dateTimeRange ? getFormatDateTime(this.dateTimeRange[0]) : undefined
      this.queryForm.endDateTime = this.dateTimeRange ? getFormatDateTime(this.dateTimeRange[1]) : undefined
      this.initTableData()
    },
    // 重置
    resetFun() {
      this.queryForm.clientId = undefined
      this.queryForm.productId = undefined
      this.queryForm.startDateTime = undefined
      this.queryForm.endDateTime = undefined
      this.dateTimeRange = ''
      this.initTableData()
    },
    // 新增
    addFun() {
      this.dialogInfo.visible = true
    },
    // 批量删除
    delsFun() {

    },
    // 导出
    exportFun() {

    },
    // 下拉框数据
    getSelectData() {
      mRequest('clientApi/getClientList', {}, ({ data }) => {
        this.clientList = data['list']
      })
      mRequest('orderApi/getOrderModelProductList', {}, ({ data }) => {
        this.productList = data['list']
      })
    },
    // 表格数据
    initTableData() {
      let params = {
        page: this.pageInfo.pageIndex,
        limit: this.pageInfo.pageSize,
        ...this.queryForm
      }
      mRequest('orderApi/listOrderModel', params, ({ data }) => {
        this.tableInfo.tableData = data.page.list
        this.pageInfo.totalPage = data.page.totalCount
      })
    },
    // 分页事件
    sizeChangeHandle(val) {
      this.pageInfo.pageSize = val
      this.initTableData()
    },
    currentChangeHandle(val) {
      this.pageInfo.pageIndex = val
      this.initTableData()
    },
  },
}
</script>

<style lang="scss" scoped>
.modelInfoTab {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}
.queryFormBox {
  .el-button--danger {
    background-color: #ffa4a4;
    border-color: #ffa4a4;
  }
  .el-form-item{
    margin-bottom: 14px;
  }
}
.tableBox{
  flex: 1;
}
::v-deep .el-table th{
  padding: 10px 0;
}
::v-deep .el-table td{
  padding: 0;
}
.pageBox{
  height: 32px;
}
.dialogBox{
  .el-form-item{
    margin-bottom: 0;
  }
  .inputNumLayout{
    position: relative;
    .maxLabel{
      position: absolute;
      right: 130px;
      opacity: 0.5;
    }
  }
}
</style>